<template>
    <view class="content">
        <maskCom ref="child"></maskCom>

        <view class>
            <view @click="downloadFun" class="btnBox downloadBox" id="xxl">下载APP看完整内容</view>
            <view class="imgBJ" style>
                <!-- <image :src="first_frame" mode="widthFix" style="width: 100%;"></image> -->
                <video :src="url" @timeupdate="checkCurrentTime" id="myVideo" style="width: 100%;" v-if="url"></video>
                <view class id="dplayer" style="width: 100%;height: 500rpx;" v-else></view>
                <!-- <video id="video" controls></video> -->
            </view>

            <view class="title">{{ name +" " +title }}</view>

            <view class="desc">{{ content }}</view>
        </view>
    </view>
</template>

<script>
import maskCom from '@/components/maskCom.vue'
import DPlayer from 'dplayer'
import Hls from 'hls.js'
import { getInfo } from '@/api/index.js'
export default {
    components: {
        maskCom,
    },
    data() {
        return {
            dplayerData: {
                style: 'width:100%;height:300rpx;position: absolute;bottom: 0;right: 0;',
            },
            title: '',
            content: '',
            counting: false,
            array: [],
            index: 0,
            url: '',
            isShowProgress: false,
            progress: 0,
            registerSuccess: false,
            type: '',
            id: '',
            name: '',
            first_frame: '',
            param: {},
        }
    },
    install(Vue) {
        const ffmpeg = createFFmpeg({
            log: true,
        })
        Vue.prototype.$ffmpeg = ffmpeg
    },
    mounted() {
        if (this.$route.path.indexOf('short') != -1) {
            this.param.creation_type = 'short'
        } else if (this.$route.path.indexOf('long') != -1) {
            this.param.creation_type = 'long'
        } else if (this.$route.path.indexOf('infomation') != -1) {
            this.param.creation_type = 'infomation'
        }
        this.param.creation_id = this.$route.query.id
        let that = this
        setTimeout(() => {
            ULink([
                {
                    id: 'usr11jeqgs9gdsoj',
                    data: that.param,
                    selector: '#xxl',
                    // timeout: 2000,
                    // useOpenInBrowerTips: 'default',
                    useOpenInBrowerTips: 'default',
                    lazy: true,
                    auto: false,
                },
            ])
        }, 100)
    },
    onLoad(e) {
        if (e) {
            this.type = e.type
            this.id = e.id
        }
        this.getData(this.$route.query.id)
        this.startTimer()
        // const convertM3U8ToMP4 =  (inputPath, outputPath) => {

        // }
    },

    methods: {
        async getData(id) {
            let that = this
            try {
                const res = await getInfo(id)
                uni.hideLoading()
                // that.dataList = res.data
                if (res.code == 200) {
                    console.log(res.data)
                    that.first_frame = res.data.first_frame
                    that.title = res.data.creation_name
                    that.content = res.data.content
                    if (res.data.collection) {
                        that.name = res.data.collection.name
                    }

                    if (res.data.fee == '0.00') {
                        that.url = res.data.media_urls[0]
                    } else {
                        that.url = ''
                        console.log('res.preview_media', res.data.preview_media)
                        //that.switchVideo(res.data.preview_media)

                        let player = new DPlayer({
                            container: document.getElementById('dplayer'),
                            theme: '#b7daff', // 风格颜色，例如播放条，音量条的颜色
                            loop: false, // 是否自动循环
                            lang: 'zh-cn', // 语言，'en', 'zh-cn', 'zh-tw'
                            hotkey: true, // 是否支持热键，调节音量，播放，暂停等
                            preload: 'auto', // 自动预加载
                            video: {
                                url: res.data.preview_media, // 播放视频的路径
                                type: 'customHls',
                                customType: {
                                    customHls: function (video, player) {
                                        const hls = new Hls() //实例化Hls  用于解析m3u8
                                        hls.loadSource(video.src)
                                        hls.attachMedia(video)
                                    },
                                },
                                // pic: 'http://qiniu.hnmzkj.top/Video/20230912/1694504889cqRSwH6D/1694504889cqRSwH6D.m3u8', // 视频封面图片
                            },
                        })
                    }
                } else {
                    uni.showToast({
                        title: res.message,
                        icon: 'none',
                    })
                }
                // 保存数据
            } catch (err) {
                uni.hideLoading()
                console.log(err)
            }
        },
        playVideo() {
            //this.getVideoDuration()
        },
        checkCurrentTime(event) {
            const currentTime = event.mp.detail.currentTime
            console.log('当前播放时间：', currentTime)
            if (currentTime > 180) {
                this.startTimer()
            }
            // 在这里可以根据当前播放时间做相应的判断和处理
        },
        getVideoDuration(e) {
            // this.videoDuration = e.target.duration;
            this.startTimer()
            console.log('播放999999999999999')
        },
        startTimer() {
            let that = this
            const videoContext = uni.createVideoContext('myVideo', this)
            // videoContext.play();
            videoContext.pause()
            videoContext.seek(0)
        },

        imgBoxFun() {
            window.close() //关闭
        },

        downloadFun() {
            //window.close() //关闭
            this.$refs.child.downloadFun()
        },
    },
}
</script>

<style>
.content {
    /* background: url('/static/Mask group@2x.png') 100% 100%; */
    /* background-image: url('/static/Mask group@2x.png'); */
    height: 100vh;
    width: 100vw;
    background-size: cover;
    background-position: 100%;
}

.btnBox {
    width: 80%;
    height: 90rpx;
    border-radius: 45rpx;
    background-color: #ff1c6d;
    line-height: 90rpx;
    text-align: center;
    color: white;
    margin: 0 auto;
}

.flex {
    display: flex;
    width: 100rpx;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 80rpx;
    top: 20rpx;
    /* overflow: hidden; */
}

.downloadBox {
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 500rpx;
}

.imgBox {
    position: absolute;
    left: 50rpx;
    top: 35rpx;
}

.contentBox {
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 1);
}

.imgBJ {
    width: 100vw;
    height: 30vh;
    overflow: hidden;
}

.title {
    font-size: 35rpx;
    font-weight: 700;
    margin-top: 20rpx;
    margin: 20rpx;
}

.desc {
    margin-top: 20rpx;
    margin: 20rpx;
    font-size: 26rpx;
    color: #333;
}
</style>